<style include="trusted-style common-style">
  #container {
    border-bottom: 1px solid var(--cros-separator-color);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 224px 32px minmax(0, 1fr);
    grid-template-rows: 1fr 16px 34px 20px;
    height: 100%;
    margin: 0 8px;
  }

  #container:not(.loading) {
    grid-template-areas: "image . text"
      "image . ."
      "image . buttons"
      ".     . .";
  }

  #container.loading {
    grid-template-areas: "image . text"
      "image . text"
      "image . text"
      ".     . .";
  }

  #imageContainer,
  #imagePlaceholder {
    --animation-delay: 1s;
    grid-area: image;
  }

  #textContainer,
  #textPlaceholder {
    align-items: flex-start;
    display: flex;
    flex-flow: column nowrap;
    grid-area: text;
    margin: 0;
  }

  #textContainer {
    justify-content: flex-end;
  }

  #textPlaceholder {
    justify-content: center;
  }

  #buttonContainer {
    grid-area: buttons;
  }

  .placeholder {
    border-radius: 12px;
  }

  #imageContainer {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

  img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  #textContainer > *,
  #textPlaceholder > * {
    margin: 0;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #textContainer > * + * {
    margin-top: 4px;
  }

  #textPlaceholder > * + * {
    margin-top: 8px;
  }

  #textContainer > span:first-child {
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-2-font);
  }

  #textPlaceholder > .placeholder:first-child {
    /* Each row is 83 ms after the prior element. */
    --animation-delay: calc(1s + 83ms);
    width: 20%;
    height: 20px;
  }

  #textContainer > span:nth-child(2) {
    color: var(--cros-text-color-primary);
    font: var(--cros-display-6-font);
  }

  #textPlaceholder > .placeholder:nth-child(2) {
    --animation-delay: calc(1s + 83ms * 2);
    width: 75%;
    height: 24px;
  }

  #textContainer > span:nth-child(n+3) {
    color: var(--cros-text-color-secondary);
    font-family: var(--personalization-app-font-google-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  #textPlaceholder > .placeholder:nth-child(n+3) {
    --animation-delay: calc(1s + 83ms * 3);
    width: 33%;
    height: 20px;
  }

  #wallpaperOptions .text,
  #collectionOptions .text {
    margin-inline-start: 8px;
  }

  iron-icon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
  }
</style>
<header id="container" class$="[[getContainerClass_(isLoading_, showImage_)]]">
  <template is="dom-if" if="[[showPlaceholders_(isLoading_, showImage_)]]">
    <div id="imagePlaceholder" class="placeholder"></div>
    <div id="textPlaceholder">
      <div class="placeholder"></div>
      <div class="placeholder"></div>
      <div class="placeholder"></div>
    </div>
  </template>
  <template is="dom-if" if="[[showImage_]]">
    <div id="imageContainer">
      <img src="[[getImageSrc_(image_)]]" aria-hidden="true">
    </div>
    <h2 id="textContainer" aria-live="polite" aria-label$="[[getAriaLabel_(image_)]]">
      <span id="currentlySet" aria-hidden="true">[[i18n('currentlySet')]]</span>
      <span id="imageTitle" title$="[[imageTitle_]]" aria-hidden="true">
        [[imageTitle_]]
      </span>
      <dom-repeat items="[[imageOtherAttribution_]]">
        <template>
          <span title$="[[item]]" aria-hidden="true">[[item]]</span>
        </template>
      </dom-repeat>
    </h2>
    <div id="buttonContainer">
      <template is="dom-if" if="[[showWallpaperOptions_]]">
        <div id="wallpaperOptions">
          <cr-button id="fill" data-layout="FILL" on-click="onClickLayoutIcon_"
              aria-pressed$="[[getFillAriaPressed_(image_)]]">
            <iron-icon icon="[[fillIcon_]]"></iron-icon>
            <div class="text">[[i18n('fill')]]</div>
          </cr-button>
          <cr-button id="center" data-layout="CENTER"
              on-click="onClickLayoutIcon_"
              aria-pressed$="[[getCenterAriaPressed_(image_)]]">
            <iron-icon icon="[[centerIcon_]]"></iron-icon>
            <div class="text">[[i18n('center')]]</div>
          </cr-button>
        </div>
      </template>
      <template is="dom-if" if="[[showCollectionOptions_]]">
        <div id="collectionOptions">
          <cr-button id="dailyRefresh" data-collection-id$="[[collectionId]]"
              aria-label$="[[i18n('ariaLabelChangeDaily')]]"
              data-daily-refresh-collection-id$="[[dailyRefreshCollectionId_]]"
              aria-pressed$="[[ariaPressed_]]"
              on-click="onClickDailyRefreshToggle_">
            <iron-icon icon="[[dailyRefreshIcon_]]"></iron-icon>
            <div class="text">[[i18n('changeDaily')]]</div>
          </cr-button>
          <cr-button id="refreshWallpaper"
              aria-label$="[[i18n('ariaLabelRefresh')]]"
              on-click="onClickUpdateDailyRefreshWallpaper_"
              hidden$="[[!showRefreshButton_]]">
            <iron-icon icon="personalization:refresh"></iron-icon>
            <div class="text">[[i18n('refresh')]]</div>
          </cr-button>
        </div>
      </template>
    </div>
  </template>
</header>
